<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>统计图表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="../../static/css/font.css">
  <link rel="stylesheet" href="../../static/css/weadmin.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href=""><cite>首页</cite></a>
        <a href=""><cite>数据统计</cite></a>
        <a>
          <cite>折线图</cite></a>
      </span>
  <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon layui-icon-refresh"></i></a>
</div>
  <div class="weadmin-body">
    <blockquote class="layui-elem-quote">
      订单管理系统数据可视化
    </blockquote>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
  </div>
  <script src="//cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
  <script type="text/javascript">
    //从后端调取数据
    var date_data = new Array()
    var user_data = new Array()
    var admin_data = new Array()
    var product_data = new Array()
    var order_data = new Array()
    $.get({
      url: "/index/chart",
      success: function (data) {
        date_data = data.date.split(",")
        user_data = data.user.split(",")
        admin_data = data.admin.split(",")
        product_data = data.product.split(",")
        order_data = data.order.split(",")

        console.log(order_data)

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '折线图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['用户数量', '管理员数量', '产品数量', '订单数量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date_data
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '用户数量',
              type: 'line',

              data: user_data
            },
            {
              name: '管理员数量',
              type: 'line',

              data: admin_data
            },
            {
              name: '产品数量',
              type: 'line',

              data: product_data
            },
            {
              name: '订单数量',
              type: 'line',

              data: order_data
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    })
  </script>
</body>

</html>